<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="350" height="550" style="border:1px solid #000000;"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'white'; // For hollow circles

        // Function to draw a lamp symbol (circle with a cross)
        function drawLamp(x, y, radius) {
            // Draw the circle
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();

            // Draw the cross inside the circle
            ctx.beginPath();
            const d = radius * Math.sin(Math.PI / 4); // Calculate offset for cross lines
            ctx.moveTo(x - d, y - d);
            ctx.lineTo(x + d, y + d);
            ctx.moveTo(x + d, y - d);
            ctx.lineTo(x - d, y + d);
            ctx.stroke();
        }

        // --- Main Drawing ---

        // Define coordinates and dimensions
        const leftWireX = 100;
        const rightWireX = 250;
        const centerX = (leftWireX + rightWireX) / 2;
        const topConnectY = 80;
        const firstLampY = 180;
        const lampSpacing = 60;
        const numLamps = 5;
        const lastLampY = firstLampY + (numLamps - 1) * lampSpacing;
        const lampRadius = 20;

        // Draw "power supply" text
        ctx.fillStyle = 'black';
        ctx.font = '28px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('power supply', centerX, 50);

        // Draw power supply terminals
        const terminalRadius = 5;
        // Left terminal
        ctx.beginPath();
        ctx.moveTo(leftWireX, topConnectY);
        ctx.lineTo(centerX - 20, topConnectY);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(centerX - 20, topConnectY, terminalRadius, 0, 2 * Math.PI);
        ctx.fill(); // Make it hollow
        ctx.stroke();

        // Right terminal and switch connection
        // The original image has a line segment ending with a vertical tick.
        // We will represent this as a standard connection to a switch.
        ctx.beginPath();
        ctx.moveTo(rightWireX, topConnectY);
        ctx.lineTo(centerX + 20, topConnectY);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(centerX + 20, topConnectY, terminalRadius, 0, 2 * Math.PI);
        ctx.fill(); // Make it hollow
        ctx.stroke();

        // Draw the vertical wires
        // Left vertical wire
        ctx.beginPath();
        ctx.moveTo(leftWireX, topConnectY);
        ctx.lineTo(leftWireX, lastLampY);
        ctx.stroke();

        // Right vertical wire with switch
        const switchY1 = 110;
        const switchY2 = 140;
        const switchContactRadius = 3;

        // Wire from top to switch
        ctx.beginPath();
        ctx.moveTo(rightWireX, topConnectY);
        ctx.lineTo(rightWireX, switchY1);
        ctx.stroke();

        // Wire from switch to bottom
        ctx.beginPath();
        ctx.moveTo(rightWireX, switchY2);
        ctx.lineTo(rightWireX, lastLampY);
        ctx.stroke();
        
        // Draw the switch
        ctx.beginPath(); // Upper contact
        ctx.arc(rightWireX, switchY1, switchContactRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();
        
        ctx.beginPath(); // Lower contact (hinge)
        ctx.arc(rightWireX, switchY2, switchContactRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();

        ctx.beginPath(); // Switch arm
        ctx.moveTo(rightWireX, switchY2);
        ctx.lineTo(rightWireX - 35, switchY1 + 5);
        ctx.stroke();


        // Draw the parallel lamp branches
        for (let i = 0; i < numLamps; i++) {
            const y = firstLampY + i * lampSpacing;
            
            // Left horizontal wire
            ctx.beginPath();
            ctx.moveTo(leftWireX, y);
            ctx.lineTo(centerX - lampRadius, y);
            ctx.stroke();

            // Right horizontal wire
            ctx.beginPath();
            ctx.moveTo(rightWireX, y);
            ctx.lineTo(centerX + lampRadius, y);
            ctx.stroke();

            // Draw the lamp
            drawLamp(centerX, y, lampRadius);
        }
        
        // Draw "Fig. 9.2" text
        ctx.fillStyle = 'black';
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 9.2', centerX, lastLampY + 60);

    </script>
</body>
</html>